feature added: tracker for mangas

4 files changed, 34 insertions, 33 deletions

diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
index 2db6d77..0050d61 100644
--- a/src/app/manga/[title]/[id]/[read]/currentReading.jsx
+++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
@@ -1,27 +1,34 @@
 "use client";
-import { useState, useEffect } from "react";
+
 import styles from "./read.module.css";
+import { useEffect } from "react";
 
-export default function CurrentReading() {
-	const [chapter, setChapter] = useState(null);
-	const [volume, setVolume] = useState(null);
+function get_current_info(title) {
+	let req = {};
 
 	useEffect(() => {
-		setChapter(localStorage.getItem("chapter") || "");
-		setVolume(localStorage.getItem("volume") || "");
-	});
+		const data = JSON.parse(localStorage.getItem("mangaData"));
+		data.watchHis.forEach((element) => {
+			if (element.title === title) {
+				req.chapter = element.chapter;
+				req.volume = element.volume;
+			}
+		});
+	}, []);
 
-	return CR(chapter, volume);
+	return req || false;
 }
 
-function CR(chapter, volume) {
+export default function Current({ name: title }) {
+	let data = get_current_info(title);
+	if (!data) {
+		return;
+	}
+
 	return (
-		<div className={styles.CurrentReadingContainer}>
-			{chapter && volume && (
-				<p>
-					Reading: Vol {volume} Chapter {chapter}
-				</p>
-			)}
-		</div>
+		<section className={styles.CurrentMain}>
+			<p className={styles.CurrentChapter}>{data.chapter}</p>
+			<p className={styles.CurrentVolume}>{data.volume}</p>
+		</section>
 	);
 }
diff --git a/src/app/manga/[title]/[id]/[read]/download.jsx b/src/app/manga/[title]/[id]/[read]/download.jsx
index b8af783..e7a20ee 100644
--- a/src/app/manga/[title]/[id]/[read]/download.jsx
+++ b/src/app/manga/[title]/[id]/[read]/download.jsx
@@ -1,5 +1,6 @@
+"use client";
+
 import styles from "./read.module.css";
-// import Link from "next/link";
 
 export default function DownloadManga({ chapterId: id }) {
 	return (
@@ -7,10 +8,13 @@ export default function DownloadManga({ chapterId: id }) {
 			<a
 				href={`https://manga-downloader-7nca.onrender.com/download?id=${id}`}
 				style={{ textDecoration: "none" }}
+				onClick={() =>
+					alert(
+						"Downloads are not instant. It might take some time to prepare your file. Thank you for your patience"
+					)
+				}
 			>
-				<button disabled title="Not available right now.">
-					Download - Beta
-				</button>
+				<button title="should work just fine">Download - Beta</button>
 			</a>
 		</div>
 	);
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
index 239a4d6..dbba6e0 100644
--- a/src/app/manga/[title]/[id]/[read]/page.jsx
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -1,7 +1,6 @@
 import styles from "./read.module.css";
 import Image from "next/image";
 import DownloadManga from "./download";
-import CurrentReading from "./currentReading";
 
 export default async function Read({ params }) {
 	const chapterId = params.read;
@@ -26,7 +25,6 @@ export default async function Read({ params }) {
 
 	return (
 		<div className={styles.Main}>
-			<CurrentReading />
 			<div className={styles.ImageContainer}>
 				<DownloadManga chapterId={chapterId} />
 				<p>Total pages: {images.length}</p>
@@ -47,7 +45,6 @@ export default async function Read({ params }) {
 						</div>
 					))}
 			</div>
-			<CurrentReading />
 		</div>
 	);
 }
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index 1d57d1c..420fff8 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -22,7 +22,7 @@
 .ImageContainer p {
 	text-align: center;
 	color: white;
-	font-family: "Kanit";
+	font-family: "Atkinson Hyperlegible", serif;
 	font-size: 16px;
 	margin: 5px;
 }
@@ -30,7 +30,7 @@
 .NotFound {
 	text-align: center;
 	color: white;
-	font-family: "Atkinson Hyperlegible";
+	font-family: "Atkinson Hyperlegible", serif;
 	font-size: 20px;
 }
 
@@ -43,7 +43,7 @@
 	outline: none;
 	border-radius: 5px;
 	padding: 5px;
-	font-family: "Lato";
+	font-family: "Atkinson Hyperlegible", serif;
 	font-size: 16px;
 	background-color: var(--light-green);
 	cursor: pointer;
@@ -53,13 +53,6 @@
 	background-color: var(--pastel-red);
 }
 
-.CurrentReadingContainer {
-	text-align: center;
-	color: white;
-	font-family: "Quicksand";
-	font-size: 18px;
-}
-
 @media screen and (max-width: 768px) {
 	.ImageContainer img {
 		width: 95%;